一行命令，安装你的TinyCLI

前言

在 一个 OpenTiny，支持Vue2、Vue3 带来 TinyVue 介绍。今日继续开启 TinyCLI。本文由 @✘✘✘投稿分享。

正文从者开始～～

让你的开发工作更加高效～，你的行动 就是答案～

快快开启你的 TinyCLI 之旅吧～

$ npm i @opentiny/cli npminstall@3 -g

一行命令即可快速安装

TinyCLI 是什么？

TinyCLI 是前端工程化的核心工具。旨在为开发者提供一系列健壮的工具、套件、插件和工作流，基于统一的开发环境，保证团队开发过程的一致性和可复制性。

TinyCLI 提供了类似 yeoman 的脚手架功能，让你快速的搭建本地开发环境；同时提供了类似于 gulp 的插件机制，用于解决前端开发过程中的各类问题。

TinyCLI 的设计理念来源于 npm，npm 本身不具备太多的功能，只是一个包管理工具。TinyCLI 也是一样，TinyCLI 本身不具备任何工程化能力，TinyCLI 只是提供了一个让你写套件 (脚手架)、写插件的平台，该平台可以安装、管理、运行对应的套件 / 插件。

TinyCLI 功能特性

01 💻 跨平台

兼容 windows、mac、linux 三个平台。

02🛠 插件体系

丰富的效率插件、可信插件、流程插件等，覆盖从开发 -> 构建 -> 发布的所有生命周期。

03📦 开箱即用

结合丰富的经验沉淀出的项目开发最佳实践，提供基于主流业务场景的项目解决方案。

04⏳ 任务流机制

提供了比 npm scripts 更强大的任务流运行机制。

05🏹 自动升级

无需手动安装和升级插件，这一切都是自动化完成。

TinyCLI 的功能特性远不止这些，更多功能特性，等待你发掘。

为什么选择 TinyCLI？

对于一个前端团队来说，需要怎么样的 cli？这个问题，我们先试想下如下的一些场景：

技术栈多样化：一个前端团队的项目工程模板往往不止一个，比如基于 vue 的单页面应用模板、PEP 的页面和楼层组件开发模板、nodejs 项目开发模板、XXX 业务开发模板等等。如何让 cli 拥有能够支持多种业务形态，具有良好的可扩展性？

存量项目多：一个团队的工程化进程肯定是不断积累与完善的，比如有些业务项目历史比较久用的是 jq 那套，可能都不需要编译的过程。如何让 cli 工具如何兼容存量项目？

落地效果保障：目前大部分团队都有研发规范，很多时候，规范就像一阵风，领导抓的时候，大家都在遵守，但是慢慢又会归于原位，人总是有惰性的，那么基于 cli 如何保障规范的落地和执行效果？

项目共性问题：比如一般每个项目都可能会有 eslint、pretter 这些代码规范及格式的环境及配置；与公司环境相关的，比如 code Review、代码发布等等，这些属于项目共性问题，是否每套工程模板都要各自去搞一套这些环境？是否可以通过插件、中间件或者其他切片方式将这些共性问题抽象出来，单独进行初始化或使用？

项目升级问题：前端技术日新月异，就我们最常用的 webpack 就已经到 webpack4 了，如何让已初始化的项目能批量升级技术栈？再比如 eslint 规范，规范更新了，怎么保证每个项目的 eslint 配置文件升级、项目工程 bug 如何快速修复等。

环境容错问题：开发过程中会遇到很多 nodejs 环境问题，比如端口占用、webpack 构建失败、依赖包缺失等，基于 cli 能否更优雅的解决环境问题，让开发者聚焦业务上？

大数据统计：大家都在用这个工具，通过什么方式可以收集一些共性信息？比如 大家项目里都依赖了哪些常用的 npm 包，大家项目的 eslint 通过率怎么样？甚至可以基于这个工具看一下大家的开发时间主要集中在哪个时间段。

每个团队的业务特征不一样，场景也非常多，定义好核心场景，是设计一个满足团队诉求的 cli 的前提。tiny-cli 的核心思想是通过提供套件与插件及任务流等能力，由团队，由用户根据自身的核心场景来拆分为套件与插件来解决各类场景问题：

套件

模板管理是这个 cli 工具的核心功能之一。模板管理这个好理解，大名鼎鼎的 yeoman 估计蛮多人都用过，他其中一个核心能力是可以安装各种 generator 来丰富自己的生态体系。基于这种平台式的架构有个最大的好处：可以让前端参与到这个工具生态里面共建模板，同时也能应对各种类型的项目，可扩展性高。

同时在 tiny-cli 套件中，通过通用的命令结合任务流功能，相比 yeoman 提供了更强大的控制能力与灵活性。

插件

而插件的概念与模板稍微有些区别，模板主要解决的是项目层面的事情，比如项目工程初始化，打包编译等事情。而插件侧重于解决项目间的共性问题，如上面场景的第四点。举个例子，比如一个 eslint 插件，功能可包含：

1、初始化 eslint 运行环境

2、运行 eslint

3、在项目的添加 git hooks，当执行 git commit 时自动触发 eslint

基于这个插件，无论在什么项目中，都能快速接入 eslint。类似的，基于插件机制，我们可以开发出各种项目小插件，如：

• 效率提升类：mock 服务插件、前端资源代理插件、前端项目依赖分析插件等。

• 流程优化类：git 操作封装插件、前端资源发布 CDN 插件等。

• 质量保障类：console 检测插件、快速搭建测试环境插件、prettier 插件等。

其他说明

目前 OpenTiny 项目已经开源啦！OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

OpenTiny 核心亮点有:

1、一套代码同时支持 Vue 2 / Vue 3

OpenTiny 使用 Renderless 架构和版本适配器，将组件分为三个部分来抹平差异。支持 Vue 2 / 3，降低了从 Vue 2 迁移到 Vue 3 的成本和风险。

2、一套代码同时支持 PC 和移动端

得益于 OpenTiny 的 Renderless 架构，我们还实现了一套代码支持多终端，这意味着：同一个组件在不同终端表现不同，在多端场景下组件的使用方式完全相同

3、提供 Angular 组件库

我们提供基于 Angular + TypeScript 的 TinyNG 组件库，包含丰富组件，支持国际化、主题定制、大数据组件，内置虚拟滚动，杜绝 XSS 攻击，稳定且安全。

4、组件丰富，功能强大

PC 端有 80 + 组件，移动端有 30 + 组件，包括高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验。此外，还提供了一些独有的特色组件，如 Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切。

5、提供开箱即用的中后台模板

OpenTiny 提供 TinyPro 中后台模板，支持 Vue、Angular 框架，包含 10 + 实用功能和 20 + 典型页面场景，适用于中后台和云服务控制台应用。

6、包含覆盖前端开发全流程的 CLI 工具

为了提升前端开发效率，OpenTiny 提供了跨平台的前端工程化 CLI 工具 TinyCLI，提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。

7、提供强大的主题配置系统

OpenTiny 还提供了一款旨在提高开发效率的主题配置系统 TinyTheme，让开发者更专注，让你的 Web 应用风格更多变。

总体来讲：

OpenTiny 是一款简单易用、高效可靠、可定制性强、兼容性好的企业级组件库解决方案，采用组件和框架分离的设计理念，只有一套 API 接口，支持跨端、跨技术栈、跨版本 Web 组件。

OpenTiny 官网：https://opentiny.design/

关于本文
作者：@OpenTiny
原文：https://mp.weixin.qq.com/s/TaEjN6hetwahH1EXxcGJCA

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。